import styles from "./index.less"
import { BorderBox8  } from '@jiaminghi/data-view-react'
import {useEffect,useState} from "react"
const MiddleLeft=()=>{
    const [IpState1,setIpState1]=useState(90)
    const [IpState2,setIpState2]=useState(86)
    const [DnsState1,SetDnsState1]=useState(212)
    const [DnsState2,SetDnsState2]=useState(196)
    const [LotState1,SetLotState1]=useState(136)
    const [LotState2,SetLotState2]=useState(102)
    const [PcState1,SetPcState1]=useState(691)
    const [PcState2,SetPcState2]=useState(684)
    useEffect(()=>{
            setInterval(()=>{
                setIpState1(Math.ceil(Math.random()*4+85))
                setIpState2(Math.ceil(Math.random()*4+85))
            },60000)
        setInterval(()=>{
            SetDnsState1(Math.ceil(Math.random()*16+196))
            SetDnsState2(Math.ceil(Math.random()*16+196))
        },72000)
        setInterval(()=>{
            SetLotState1(Math.ceil(Math.random()*34+102))
            SetLotState2(Math.ceil(Math.random()*34+102))
        },90000)
        setInterval(()=>{
            SetPcState1(Math.ceil(Math.random()*7+684))
            SetPcState2(Math.ceil(Math.random()*7+684))
        },90000)
    },[])
    return(
        <div className={styles.middleLeft_container}>
            {/*<BorderBox8></BorderBox8>*/}
            <div className={styles.nav}>
                <div className={styles.top}>
                    <img src={require('@/assets/images/IP.png')}/>
                    <div className={styles.text}>IP</div>
                </div>
                <div className={styles.content}>
                    <div className={styles.total}>
                        <div className={styles.title}>总计</div>
                        <div className={styles.number}>{IpState1}</div>
                    </div>
                    <div className={styles.total}>
                        <div className={styles.title}>监控中</div>
                        <div className={styles.number}>{IpState2}</div>
                    </div>
                </div>
            </div>
            <div className={styles.nav}>
                <div className={styles.top}>
                    <img src={require('@/assets/images/duan.png')}/>
                    <div className={styles.text}>端口</div>
                </div>
                <div className={styles.content}>
                    <div className={styles.total}>
                        <div className={styles.title}>总计</div>
                        <div className={styles.number}>{DnsState1}</div>
                    </div>
                    <div className={styles.total}>
                        <div className={styles.title}>监控中</div>
                        <div className={styles.number}>{DnsState2}</div>
                    </div>
                </div>
            </div>
            <div className={styles.nav}>
                <div className={styles.top}>
                    <img src={require('@/assets/images/loT.png')}/>
                    <div className={styles.text}>loT</div>
                </div>
                <div className={styles.content}>
                    <div className={styles.total}>
                        <div className={styles.title}>总计</div>
                        <div className={styles.number}>{LotState1}</div>
                    </div>
                    <div className={styles.total}>
                        <div className={styles.title}>监控中</div>
                        <div className={styles.number}>{LotState2}</div>
                    </div>
                </div>
            </div>

            <div className={styles.nav}>
                <div className={styles.top}>
                    <img src={require('@/assets/images/PC.png')}/>
                    <div className={styles.text}>PC</div>
                </div>
                <div className={styles.content}>
                    <div className={styles.total}>
                        <div className={styles.title}>总计</div>
                        <div className={styles.number}>{PcState1}</div>
                    </div>
                    <div className={styles.total}>
                        <div className={styles.title}>监控中</div>
                        <div className={styles.number}>{PcState1}</div>
                    </div>
                </div>
            </div>

        </div>
    )
}
export  default  MiddleLeft